import uniqueid from 'lodash.uniqueid';

//控件设置的基础配置

//tab配置
export type TTabCode = 'baseComponent';
export interface TtabItem {
  tabName: string; //tab的名称
  code: string; //tab的唯一code
  componentCodeList: string[]; //tab下的控件code列表，根据这个渲染tab下的控件
}
export const tabList: TtabItem[] = [
  {
    tabName: '基础控件',
    code: 'baseComponent',
    componentCodeList: [
      'TEXT',
      'TEXT_AREA',
      'TEXT_NUMBER',
      'DATE',
      'DATE_RANGE',
      'SELECT',
      'RADIO',
      'CHECK_BOX',
      'DETAIL_TABLE',
      'CONTAINER',
      'UPLOAD',
      'BUTTON',
      'PROMOTION'
    ]
  },
  {
    tabName: '业务控件',
    code: 'businessComponent',
    componentCodeList: [
      'TEXT',
      'TEXT_AREA',
      'TEXT_NUMBER',
      'DATE',
      'DATE_RANGE',
      'SELECT'
    ]
  }
];

//控件配置
export interface TcomponentItem {
  componentName: string; //控件的名称
  enName: string;
  componentType: string; //控件的类型
  code: string; //控件的唯一code
  showFieldList: string[]; //该控件可修改的props字段
  icon: string; //控件的icon
  props: any; //对象 props的默认值
  childrenCtl?: any[];
  controlDetailList?: any[];
  enable?: 1 | 2; //是否开启（1 开启 2 禁用）
  required?: 1 | 2; //控件值是否必填（1 是 2 否）
  isDefault?: 1 | 2; //是否为默认控件（1 是 2 否）
  // span: 12
  // orderNo:0;//控件排序
  fieldName: string; //控件数据库表列名（唯一）
  // ctlCode: "", //控件编码（唯一）
}
const commonField = {
  enable: 1,
  required: 2,
  isDefault: 2,
  fieldName: '',
  enName: ''
};
export const componentList: TcomponentItem[] = [
  {
    componentName: '单行文本',
    enName: `TEXT${uniqueid()}`,
    componentType: 'TEXT',
    fieldName: `TEXT${uniqueid()}`,
    code: 'TEXT',
    icon: 'icon-danhangwenben',
    showFieldList: ['validate', 'textMax', 'placeholder'],
    props: {
      placeholder: '请输入文字'
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '多行文本',
    enName: `AREA${uniqueid()}`,
    componentType: 'TEXT_AREA',
    fieldName: `AREA${uniqueid()}`,
    code: 'TEXT_AREA',
    icon: 'icon-duohangwenben',
    showFieldList: ['textMax', 'placeholder'],
    props: {
      placeholder: '请输入文字'
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '数字',
    enName: `NUMBER${uniqueid()}`,
    componentType: 'TEXT_NUMBER',
    fieldName: `NUMBER${uniqueid()}`,
    code: 'TEXT_NUMBER',
    icon: 'icon-shuzi',
    showFieldList: ['textMax', 'placeholder'],
    props: {
      placeholder: '请输入数字'
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '日期',
    enName: `DATE${uniqueid()}`,
    componentType: 'DATE',
    fieldName: `DATE${uniqueid()}`,
    code: 'DATE',
    icon: 'icon-calendar',
    showFieldList: ['placeholder', 'dateFormat', 'showTime'],
    props: {
      placeholder: '请输入日期',
      dateFormat: 'YYYY-MM-DD', // 时间格式
      showTime: true, // 是否为带日期的选择器
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '日期范围',
    enName: `DATE${uniqueid()}`,
    componentType: 'DATE_RANGE',
    fieldName: `DATE${uniqueid()}`,
    code: 'DATE_RANGE',
    icon: 'icon-calendar',
    showFieldList: ['placeholder', 'dateFormat', 'showTime'],
    props: {
      placeholder: '',
      dateFormat: 'YYYY-MM-DD', // 时间格式
      showTime: false, // 是否为带日期的选择器
      valueFormat: 'x' // 传给后端的时间格式(默认为时间戳)
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '下拉选择框',
    enName: `SELECT${uniqueid()}`,
    componentType: 'SELECT',
    fieldName: `SELECT${uniqueid()}`,
    code: 'SELECT',
    icon: 'icon-xialaxuanze',
    showFieldList: ['placeholder', 'selectOptions'],
    props: {
      keyType: 0 //0数字1字符串
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '单选框',
    enName: `RADIO${uniqueid()}`,
    componentType: 'RADIO',
    fieldName: `RADIO${uniqueid()}`,
    code: 'RADIO',
    icon: 'icon-danxuankuang',
    showFieldList: ['placeholder', 'radioOptions'],
    props: {
      keyType: 0, //0数字1字符串
      radioOptions: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' }
      ]
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '多选框',
    enName: `CHECK${uniqueid()}`,
    componentType: 'CHECK_BOX',
    fieldName: `CHECK${uniqueid()}`,
    code: 'CHECK_BOX',
    icon: 'icon-danxuankuang',
    showFieldList: ['max', 'checkBoxOptions'],
    props: {
      keyType: 0, //0数字1字符串
      checkOption: [
        {
          value: 1,
          label: '选项1'
        },
        {
          value: 2,
          label: '选项2'
        }
      ]
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '表格明细',
    enName: `table${uniqueid()}`,
    componentType: 'DETAIL_TABLE',
    fieldName: `table${uniqueid()}`,
    code: 'DETAIL_TABLE',
    icon: 'icon-biaoge',
    showFieldList: ['detailTable'],
    props: {
      layout: 1 // 1表格布局2表单布局
    },
    childrenCtl: [],
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '容器',
    enName: `CONTAINER${uniqueid()}`,
    componentType: 'CONTAINER',
    fieldName: `CONTAINER${uniqueid()}`,
    code: 'CONTAINER',
    icon: 'icon-biaoge',
    showFieldList: ['detailTable'],
    props: {
      layout: 1
    },
    controlDetailList: [],
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '文件上传',
    enName: '',
    componentType: 'UPLOAD',
    fieldName: '',
    code: 'UPLOAD',
    icon: 'icon-biaoge',
    showFieldList: ['upload'],
    props: {
      /**
       * 最大文件数
       */
      limit: 3,
      /**
       * 文件大小
       */
      fileMaxSize: 5,
      /**
       * 文件列表
       */
      fileList: []
    },
    childrenCtl: [],
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '按钮',
    enName: '',
    componentType: 'BUTTON',
    fieldName: '',
    code: 'BUTTON',
    icon: 'icon-biaoge',
    showFieldList: ['button'],
    props: {
      /**
       * 跳转连接地址
       */
      url: '',
      /**
       * 隐藏标题
       */
      hideTitle: 1
    },
    enable: 1,
    required: 2,
    isDefault: 2
  },
  {
    componentName: '晋升图',
    enName: '',
    componentType: 'PROMOTION',
    fieldName: '',
    code: 'PROMOTION',
    icon: 'icon-biaoge',
    showFieldList: ['promotion'],
    props: {
      /**
       * 晋升数组
       */
      promotionList: ['职位名称']
    },
    enable: 1,
    required: 2,
    isDefault: 2,
    values: ['职位名称']
  }
];
